<template>
  <div>
    <div>
      <el-form ref="employee" :model="employee" label-width="80px" class="loginForm">
        <el-form-item label="账号">
          <el-input v-model="employee.ename"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="employee.password"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input v-model="verifycode"></el-input>
          <img :src="verifycodesrc" @click="createVerifyCode()"/>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="primary" @click="$router.push('/findPassword')">找回密码</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        employee:{},
        verifycode: '',
        verifycodesrc: '',
        uuid: '',
    };
  },
  mounted(){
    this.createVerifyCode();
  },
  methods:{
    createVerifyCode(){
      // this.verifycodesrc="http://localhost:8080/verifycode?t="+new Date();
      this.$axios
            .get("http://localhost:8080/verifycode")
            .then(resp=>{
              if(resp.data.code==200){
                this.verifycodesrc="data:image/png;base64,"+resp.data.data.verifycodesrc;
                this.uuid=resp.data.data.uuid;
              }
            });
    },
    login(){
         this.$axios
            .get("http://localhost:8080/employee/login",
            {params:{ename:this.employee.ename,password:this.employee.password,
                    uuid:this.uuid,verifycode:this.verifycode}})
            .then(resp=>{
                if(resp.data.code==200){
                    //将响应头中的token存储到浏览器
                    // console.log(resp.headers.token);
                    // localStorage.setItem("token",resp.headers.token);
                    this.$router.push("/");
                    this.$message("登录成功");
                }else{
                    this.$message(resp.data.data);
                    this.createVerifyCode();
                }
            });
    }
  }
};
</script>

<style>
.loginForm{
    width:500px;
    margin: 0px auto;
    padding-top: 100px;
}
</style>